<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="flex flex-center bg-white rounded-4 p-4">
				<view class="flex-1 flex flex-column grid-gap-4">
					<text class="font-weight-600 h8">当前可用</text>
					<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="1"
						:money="USERINFO.money" unit="">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
					<view class="flex flex-y-center">
						<text class="h9 text-grey">累计充值：</text>
						<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="6"
							:money="USERINFO.money_sum" unit="">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
					</view>
				</view>
				<view class="flex flex-center" @click="$page.open('/pages/user/wallet/log', true)">
					<text class="text-grey h9">账单</text>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="grid-columns-4 grid-gap-4">
				<view class="grid-column-2 rounded-4 p-4 flex flex-column flex-center h-80px"
					v-for="(item, index) in mealList" :key="index"
					:class="form.id == item.id ? 'bg-primary text-white' : 'bg-white text-primary'"
					@tap="toSetMoney(item)">
					<text class="font-weight-600 h6">{{ item.money }}</text>
					<text class="h9 font-weight-600" v-if="item.give_money > 0">充{{ item.money }}送{{ item.give_money
						}}</text>
				</view>
				<view class="grid-column-2 rounded-4 p-4 flex flex-column flex-center h-80px"
					:class="customRegister ? 'bg-primary text-white' : 'bg-white text-dark-light-3'"
					@tap="toCustomRegister">
					<text class="font-weight-600 h8">自定义充值</text>
				</view>
			</view>

			<view class="flex flex-column grid-gap-4 bg-white p-4 rounded-4" v-show="customRegister">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h8 font-weight-600">自定义充值</text>
				</view>
				<view class="flex flex-center bg rounded-round px-6">
					<input type="number" placeholder="请输入充值金额" class="p-4 flex-1 font-weight-600 h6 text-danger-light-3"
						v-model="form.money" maxlength="8">
					<text class="h9 font-weight-600 text-danger-light-3">元</text>
				</view>
				<view class="flex flex-center" v-if="form.money > 0">
					<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="1" :money="form.money"
						unit="">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
			</view>

			<view class="flex flex-column grid-gap-2">
				<text v-if="WEBCONFIG.money_register_tips" class="h9 text-placeholder">{{ WEBCONFIG.money_register_tips
					}}</text>
				<view class="flex flex-y-center">
					<text class="h9 text-grey">请阅读</text>
					<text class="h9 text-primary"
						@tap="$page.open('/pages/article/content?alias=recharge_notice')">《充值须知》</text>
					<text class="h9 text-primary" @tap="$page.open('/pages/article/content?alias=pay')">《支付协议》</text>
				</view>
			</view>
			<view class="flex">
				<button class="flex-1 btn-primary btn-round" @click="submit()">确认充值</button>
			</view>
		</view>
		<x-pay v-model:show="payTypeShow" :orders-type="form.type" @confirm="payCallBack" :price="form.money" />
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { usePlatformStore, useWebConfigStore, useUserStore, useRefs } from "@/stores";
import { $page, $api, $message, } from "@/utils";
import { usePay } from "@/utils/pay";
import { $ResponseCode } from '@/utils/const/env';
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const payTypeShow = ref(false);
const customRegister = ref(false);
const form = ref({
	id: '',
	type: 'money',
	pay_type: '',
	platform: '',
	code: '',
	money: ''
});
const wallet = ref([]);
const mealList = ref([]);
const getList = () => {
	$api.MoneyRegister.index().then(data => {
		mealList.value = data;
	})
}
const submit = () => {
	if (!form.value.id) {
		const money_min_register = Number(WEBCONFIG.value.money_min_register);
		if (money_min_register && form.value.money < money_min_register) {
			return $message.error('最低充值' + WEBCONFIG.value.money_min_register + '元');
		}
		if (!form.value.money) {
			return $message.error('请输入充值金额');
		}
	}
	payTypeShow.value = true;
}
const payCallBack = (pay_type:any) => {
	if (pay_type) {
		form.value.pay_type = pay_type;
		uni.showLoading({
			title: '获取订单中...',
			mask: true
		})
		$api.Orders.create(form.value).then((res:any) => {
			if (res.code === $ResponseCode.SUCCESS) {
				setTimeout(() => {
					uni.showLoading({
						title: '查询中...',
						mask: true
					});
					usePay(res.data).then(() => {
						form.value.money = '';
						customRegister.value = false;
						$api.User.userinfo(true);
					}).catch((err:any) => {
						console.log(err);
						$message.error(err.msg);
					}).finally(() => {
						uni.hideLoading();
					});
				}, 300)
			} else if (res.code === $ResponseCode.PAY_SUCCESS) {
				form.value.money = '';
				customRegister.value = false;
				$api.User.userinfo(true);
			}
		}).catch((err:any) => {
						console.log(err);
			$message.error(err.msg);
		}).finally(() => {
			uni.hideLoading();
		})
	}
	payTypeShow.value = false;
}
const toSetMoney = (item:any) => {
	customRegister.value = false;
	form.value.id = item.id;
	form.value.money = item.money;
}
const toCustomRegister = () => {
	form.value.money = '';
	form.value.id = '';
	customRegister.value = true
}

onLoad(() => {
	form.value.platform = PLATFORM.value.platform;
	getList();
	// #ifdef MP-WEIXIN
	wx.login({
		success: (res: any) => {
			if (res.code) {
				form.value.code = res.code;
			}
		},
		fail: () => {
			uni.showModal({
				title: '提示',
				content: '微信授权失败',
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						$page.back();
					}
				}
			});
		}
	})
	// #endif
})
</script>
<style lang="scss" scoped>
.h-80px {
	height: 80px;
}
</style>
